<template>
	<view class="img-detail">
		<header-bar @more="showShare" :moreShow="true"></header-bar>
		<image class="img" :src="opusExtDTO.img" mode=""></image>
		<img-information :userInfo="userDTO" :opus="opusExtDTO" v-if="!shareIcon" :isShow="isShow && !shareIcon" :animation="animationData"></img-information>
		<share @close="close" v-if="shareIcon"></share>
	</view>
</template>

<script>
	import { getOpusDetail } from '@/common/api/index.js'
	import HeaderBar from '@/components/headerBar.vue'
	import ImgInformation from './components/img-information.vue'
	import share from '@/components/share.vue'
	export default {
		components: { HeaderBar, ImgInformation, share },
		data() {
			return {
				animationData: {},
				isShow: true,
				shareIcon: false,
				id: '',
				opusExtDTO: {},
				userDTO: {}
			};
		},
		onLoad(options) {
			console.log(options,'参数')
			if (options.id) {
				this.id = options.id
			}
		},
		onShow() {
			var animation = uni.createAnimation({
				duration: 1000,
				delay: 100,
				timingFunction: 'ease-in',
			})
			
			this.animation = animation
			animation.translateY(820).step()
			// animation.scale(0.5).step()
			
			this.animationData = animation.export()
		},
		mounted() {
			this.getInfo()
		},
		methods: {
			async getInfo () {
				let res = await getOpusDetail(this.id)
				if (res.code === 0) {
					console.log('请求成功',res.data)
					this.opusExtDTO = res.data.opusExtDTO
					this.userDTO = res.data.userDTO
				}
			},
			close () {
				// 关闭分享
				this.shareIcon = false
			},
			showShare () {
				this.shareIcon = true
			}
		},
		show () {
			this.isShow = !this.isShow
			if (this.isShow) {
				// 展示
			} else {
				// 隐藏
			}
		}
	}
</script>

<style lang="less" scoped>
	.ease-enter-active, .ease-leave-active {
		transition: opacity .5s;
	}
	.ease-enter, .ease-leave-to {
		opacity: 1;
	}
	.img-detail {
		width: 100%;
		height: 100%;
		.img {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}
	}
</style>
